<template>
  <el-dialog
    v-el-drag-dialog="fullScreen"
    class="pre-dialog"
    title="预览"
    :visible="visible"
    :fullscreen="fullScreen"
    :append-to-body="appendToBody"
    width="900px"
    :show-close="false"
    @update:visible="updateVisible">
    <div slot="title">
      预览
      <span
        @click="fullScreen = !fullScreen"
        class="full-screen-btn">
        <i :class="fullScreen?'el-icon-copy-document':'el-icon-full-screen'" />
      </span>
      <span
        @click="()=>updateVisible(false)"
        class="close-btn">
        <i class="el-icon-close" />
      </span>
    </div>
    <div 
      class="pre-box">
      <div class="pre-box-view" :class="{ 'padding-0': isShowType }">
        <div
          v-if="isShowType"
          class="showtype-title">
          <span class="showtype-title__label">节目名称</span>
          <div class="showtype-title__value">{{ preData.name }}</div>
        </div>
        <div class="pre-box-view__table" :class="{'show-type': isShowType}">
          <el-image v-if="isShowType" :src="preData.path || preData.thumbnailFile" class="limitImg" :preview-src-list="[preData.path || preData.thumbnailFile]"></el-image>
          <p v-else-if="preData._isText"> {{ preData.content }}</p>
          <!-- <video ref="video" controls autoplay v-else-if="String(preData.type) === FILETYPE.VIDEO" class="limitVA" :src="preData.path"></video> -->
          <audio ref="audio" controls autoplay v-else-if="String(preData.type) === FILETYPE.AUDIO" class="limitVA" :src="preData.path"></audio>
          <video-player class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            v-else-if="String(preData.type) === FILETYPE.VIDEO"
            :options="playerOptions"
            >
          </video-player>
          <!-- <img v-else-if="String(preData.type) === FILETYPE.NET_PICTURE" :src="preData.content" />
          <img v-else :src="preData.path || preData.thumbnailFile" /> -->
          <el-image v-else-if="String(preData.type) === FILETYPE.NET_PICTURE" class="limitImg" :src="preData.content" :preview-src-list="[preData.content]"></el-image>
          <el-image v-else :src="preData.path || preData.thumbnailFile" class="limitImg" :preview-src-list="[preData.path || preData.thumbnailFile]"></el-image>
        </div>
      </div>
      <div v-if="!isShowType" class="pre-box-info">
        <div v-if="preData.showType === 1">
          <p :title="preData.name">名称: {{ preData.name }}</p>
          <p>尺寸: {{ preData.type }}</p>
          <p>创建时间: {{ preData.createdAt }}</p>
        </div>
        <div v-else-if="preData.showType === 2">
          <p :title="preData.name">名称: {{ preData.name }}</p>
          <p>类型: 模板</p>
          <p>尺寸: {{ preData.type }}</p>
          <p>创建时间: {{ preData.createdAt }}</p>
          <p>被使用: {{ preData.refCount }}</p>
          <p>有效性: {{ preData.validity | validityFilter(te) }}</p>
          <p>审核: {{ preData.auditState | auditStateFilter }}</p>
        </div>
        <div v-else-if="preData.showType === 3">
          <el-tooltip :content="preData.name" placement="bottom">
            <p style="height:16px;">名称: {{ preData.name }}</p>
          </el-tooltip>
          <p>类型: {{ preData.type | getTypeName }}</p>
          <p>大小: {{ preData.fileSize }}</p>
          <p :title="preData.comment">描述: {{ preData.comment }}</p>
          <p>创建时间: {{ preData.createdAt }}</p>
          <p>被使用: {{ preData.refCount }}</p>
          <p>状态: {{ preData | getStateName }}</p>
          <p>有效性: {{ preData.validity ? '有效' : '无效' }}</p>
          <p v-if="preData.qrCode">二维码地址: 
            <a :href="preData.qrCode" target="_blank">{{ preData.qrCode }}</a>
          </p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { fileTypeOpts, FILETYPE } from '../media-center/const'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  name: 'preview-dialog',
  directives: {
    elDragDialog
  },
  components: {
    videoPlayer
  },
  props: {
    appendToBody: {
      type: Boolean,
      default: false
    },
    isShowType: {
      type: Boolean,
      default: false
    },
    preData: { // 要展示的数据
      type: Object,
      default() {
        return {
        }
      }
    },
    imgUrl: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible(v) {
      if (!v) {
        this.$refs.videoPlayer && this.$refs.videoPlayer.player.pause()
        this.$refs.audio && this.$refs.audio.pause()
      } else {
        this.$refs.videoPlayer && this.$refs.videoPlayer.player.play()
        this.$refs.audio && this.$refs.audio.play()
      }
    },
    preData(v) {
      if(v) {
        if(String(v.type) === FILETYPE.VIDEO) {
          this.$nextTick(() => {
            console.log('preview data===========',v)
            this.playerOptions.sources[0].src = v.path
            this.playerOptions.poster = v.thumbnailFile
          })
        }
      }
    }
  },
  data() {
    return {
      FILETYPE,
      fullScreen: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false,     // 如果为true,浏览器准备好时开始回放。
        muted: false,       // 默认情况下将会消除任何音频。
        loop: true,         // 是否视频一结束就重新开始。
        preload: 'auto',    // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true,        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sourceOrder: true, // 
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        poster: "",
        sources: [{
          // type: "video/mp4", // 类型
          src: ''            // url地址
        }],
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,            // 当前时间和持续时间的分隔符
          durationDisplay: true,        // 显示持续时间
          remainingTimeDisplay: false,  // 是否显示剩余时间功能
          fullscreenToggle: true        // 是否显示全屏按钮
        }
      }
    }
  },
  filters: {
    auditStateFilter(val) {
      let msg = ''
      switch(val){
        case 0:
          msg = '待审核'
          break
        case 1:
          msg = '审核通过'
          break
        case -1:
          msg = '审核不通过'
          break
      }
      return msg
    },
    getTypeName(v) {
      let fileType = fileTypeOpts.find(item => item.value == v)
      return fileType ? fileType.label : v
    },
    getStateName(v) {
      let msg = ''
      if(v.auditState === 0) {
        // -1:待转码 -2:转码失败 -3:转码中
        switch(v.state) {
          case -1:
            msg = '待转码'
            break
          case -2:
            msg = '转码失败'
            break
          case -3:
            msg = '转码中'
            break
          default:
            msg = "不可用"
        }
        return msg
      } else {
        return v.auditState == '3' ? '可用' : '不可用'
      }
    },
    validityFilter(val,te) {
      if(val) {
        return te('有效')
      }
      return te('无效')
    }
  },
  methods: {
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    te(arg) {
      const hasKey = this.$te(arg)
      if (hasKey) {
        const result = this.$t(arg)
        return result
      }
      return arg
    }
  }
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';

.pre-dialog {
  ::v-deep .el-dialog__header .el-dialog__headerbtn {
    top: 8px;
  }
  ::v-deep .is-fullscreen.el-dialog {
    display: flex;
    flex-direction: column;
  }
  ::v-deep .is-fullscreen.el-dialog .el-dialog__body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  ::v-deep .is-fullscreen.el-dialog .el-dialog__body .pre-box {
    flex: 1;
  }
}
.full-screen-btn {
  position: absolute;
  right: 50px;
  top:8px;
  i{ font-size: 14px; color:#666;}
}
.close-btn {
  cursor: pointer;
  position: absolute;
  right: 24px;
  top:9px;
  i{ font-size: 16px; color:#666;}
}
.pre-box {
  display: flex;
  align-items: stretch;

  .padding-0 {
    padding: 0;
    padding-bottom: 10px;
  }

  .showtype-title {
    margin: 20px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &__label {
      margin-right: 20px;
    }

    &__value {
      // width: 750px;
      flex: 1;
      height: 36px;
      line-height: 36px;
      padding: 0 15px;
      border: 1px solid $bg-e9;
    }
  }

  &-view {
    flex: 1;
    position: relative;
    padding: 20px;

    &__table {
      background: $bg-f4;
      min-width: 500px;
      min-height: 500px;
      overflow-y: auto;
      height: 100%;
      .limitImg ::v-deep > img {
        width: 100%;
        max-height: 500px;
        object-fit: contain;
      }
      .limitVA {
        width: 100%;
        max-height: 500px;
        object-fit: contain;
      }

      &.show-type {
        width: calc(100% - 20px);
        min-height: 640px;
        height: calc(100% - 100px);
        margin: 0 auto;
      }
    }
  }

  &-info {
    flex-basis: 360px;
    width: 360px;
    border-left: 1px solid $bg-e9;
    padding: 30px;
    position: relative;
    p {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 0;
    }
  }
}
.icon-quanping{ font-size: 12px; color:#909399; }
</style>